<template>
  <div class="bg">
    <div class="login">
      <a-form
        class="main"
        :model="formState"
        name="basic"
        :label-col="{ span: 8 }"
        :wrapper-col="{ span: 24 }"
        autocomplete="off"
        @finish="onFinish"
      >
        <div class="head">绑定手机号码</div>
        <a-form-item
          name="phoneNumber"
          :rules="[
            { required: true, message: '请输入手机号码' },
            {
              pattern: /^1[3-9]\d{9}$/,
              message: '请输入正确的手机号码!',
            },
            { max: 20, message: '手机号码不能超过20位!' },
          ]"
        >
          <a-input
            class="w100"
            v-model:value="formState.phoneNumber"
            placeholder="输入手机号码"
          />
        </a-form-item>
        <a-form-item
          name="code"
          :rules="[{ required: true, message: '短信验证码' }]"
        >
          <a-input
            v-model:value="formState.code"
            placeholder="短信验证码"
            class="dxInt"
          >
          </a-input>
          <a-button
            @click="freeAccess(1)"
            v-if="codeState"
            type="text"
            class="intBut"
          >
            获取验证码</a-button
          >
          <a-button
            class="intBut"
            @click="freeAccess(2)"
            v-else
            :disabled="disabled"
            type="text"
          >
            <span v-if="codeTimer > 0"> {{ codeTimer }}</span>
            重新获取</a-button
          >
        </a-form-item>
        <a-button class="button" type="primary" html-type="submit"
          >确认提交</a-button
        >
        <div class="text-wrapper_3">
          <van-checkbox
            v-model="checked"
            icon-size="12"
            checked-color="#3c7058"
          ></van-checkbox>
          <span class="text_6"> 点击登录表示您已阅读并同意</span>
          <span class="text_7" @click="privacy">《用户隐私协议》</span>
        </div>
      </a-form>
    </div>
  </div>
</template>

<script setup>
import { sendRegisterCode } from '@/api/api'
import { useRouter } from 'vue-router'
import { Toast } from 'vant'
import { useAppStore } from '@/store'
const appStore = useAppStore()
const router = useRouter()
const codeState = ref(true)
const codeTimer = ref(60)
const timer = ref(null)
const checked = ref('')
const formState = ref({
  code: '',
  phoneNumber: '',
  password: 'pwd123',
})
const userInfo = ref({})
const disabled = computed(() => {
  return codeTimer.value > 0
})
watch(codeTimer, (newValue, oldValue) => {
  if (newValue === 0) {
    clearInterval(timer.value)
    codeTimer.value = 0
  }
})
onBeforeMount(() => {
  userInfo.value = JSON.parse(localStorage.getItem('userInfo'))
  console.log('userInfo.value:vip ', userInfo.value)
})
const privacy = () => {
  router.push({ path: '/privacy' })
}
const freeAccess = async (s) => {
  if (formState.value.phoneNumber == '') {
    Toast.fail('请输入手机号码')
    return
  }
  codeTimer.value = 60
  if (codeState.value) {
    codeState.value = false
  }
  timer.value = setInterval(() => {
    codeTimer.value--
  }, 1000)
  const res = await sendRegisterCode(formState.value.phoneNumber)
  if (res.code == 200) {
    Toast.success('验证码发送成功')
  } else {
    Toast.fail(res.msg)
  }
}
// 表单校验通过
const onFinish = async (values) => {
  console.log('values: ', values)
  if (checked.value == '') {
    Toast({
      message: '请勾选用户隐私协议',
    })
    return
  }
  values.password = 'pwd123'
  
  if (userInfo.value?.openId != null) {
    values.openId = userInfo.value.openId
  } else {
    values.openId = ''
  }

  appStore.login(values)
}
</script>
<style scoped lang='less'>
.dxInt {
  position: relative;
}
.intBut {
  position: absolute;
  right: 16px;
  top: 9px;
  color: #d7855e;
  &:hover {
    color: #d7855e;
    background-color: transparent !important;
  }
}

.text-wrapper_3 {
  display: flex;
  width: 100%;
  text-align: center;
  margin-top: 75px;
  font-size: 12px;
  color: #999;
  justify-content: center;
  .text_7 {
    color: #3c7058;
  }
}
:deep(.ant-input) {
  padding: 10px;
  border-bottom: 1px solid #d9d9d9;
  border-radius: 30px;
  height: 50px;
  font-size: 16px;
  &::placeholder {
    color: #000;
    // font-size: 16px;
  }
}
:deep(.ant-form-item) {
  margin-bottom: 22px;
}

.bg {
  width: 100%;
  height: 100vh;
  position: relative;
  background: url('@/assets/dlbj.png') no-repeat top center;
  background-size: cover;
}
.login {
  margin: auto;
  text-align: center;
  bottom: 0;
  width: 100%;
  position: absolute;
  height: 420px;

  .head {
    margin-bottom: 16px;
    font-size: 18px;
    margin-left: 10px;
  }

  .main {
    width: 85vw;
    height: 15vh;
    text-align: left;
    margin: auto;
    margin-top: 6vh;
  }
  .button {
    height: 44px;
    background: #3c7058;
    font-size: 16px;
    width: 100%;
    border-radius: 20px;
    margin-top: 16px;
  }
}
:deep(.ant-form-item-explain-error) {
  margin-left: 14px;
}
</style>
